<!--
 * @Author: ssj
 * @Date: 2021-06-26 17:51:15
 * @LastEditors: zss
 * @LastEditTime: 2024-11-15 10:43:53
 * @Description: magicbox
 
-->

<template>
  <div
    class="magicbox"
    :style="showAnimation"
    @mouseup="dragEnd"
    @mousemove="dragMove"
  >
    <div class="back" @click="close()" v-show="!isMini"></div>
    <div class="mini-back" v-show="isMini">
      <div
        class="mini-back-o back-left"
        @click="close()"
        :style="backLeftStyle"
      ></div>
      <div
        class="mini-back-o back-top"
        @click="close()"
        :style="backTopStyle"
      ></div>
      <div
        class="mini-back-o back-right"
        @click="close()"
        :style="backRightStyle"
      ></div>
      <div
        class="mini-back-o back-bottom"
        @click="close()"
        :style="backBottomStyle"
      ></div>
      <div
        class="mini-back-o back-center"
        @click="close()"
        :style="backCenterStyle"
      ></div>
    </div>
    <div class="front">
      <div
        class="full-open"
        @click="openFullMagicBox"
        :style="fullOpenStyle"
        v-show="isMini"
      ></div>
      <div class="move" ref="magicBox" :style="boxStyle">
        <div class="cover">
          <div class="header" @mousedown="dragStart" v-show="!isMini">
            <div class="title">{{ title }}</div>
            <Icon type="md-close" @click="close()" />
          </div>

          <div
            class="main"
            v-if="!$srv.utils.isEmpty(layoutConfig)"
            :style="{ height: 'calc(100% - ' + (80 - isMini * 40) + 'px)' }"
          >
            <div class="headTitle" v-if="headTitle.length > 0">
              <div
                class="title-item"
                v-for="(itm, idx) of headTitle"
                :key="idx"
              >
                <div class="label">{{ $srv.getI18nBySrv(itm.label) }}：</div>
                <div class="value">{{ itm.value }}</div>
              </div>
            </div>
            <div class="full" v-if="isFunLayout">
              <o-layout
                listenType="magicbox"
                :config="layoutConfig"
                ref="fullLayout"
              ></o-layout>
            </div>
            <div class="full" v-else>
              <o-layout-single
                :config="layoutConfig"
                listenType="magicbox"
                :isAutoload="isAutoload"
                ref="singleLayout"
              ></o-layout-single>
            </div>
          </div>
          <div class="footer">
            <!-- 取消 -->
            <Button size="small" @click="close()">
              {{ $srv.getI18nByPath('others.cancel') }}
            </Button>
            <!-- 自定义按钮 -->
            <Button
              size="small"
              v-for="(btn, idx) in customBtns"
              :key="btn.key || idx"
              :type="btn.type || 'default'"
              :icon="btn.icon || ''"
              @click="custBtnClick(btn)"
            >
              {{ $srv.getI18nBySrv(btn.title || btn.key || '') }}
            </Button>

            <!-- 确定选择 -->
            <Button size="small" type="primary" @click="requestSend()">
              {{ $srv.getI18nByPath('others.surechoose') }}
            </Button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { T_srv, Tsrv, vue } from '@/services';
import { N_oSetupPanel } from '../o-setup-panel/types';
import { N_oMagicbox } from './types';

@T_srv.comp
export default class oMagicBox extends vue {
  @T_srv.prop({ required: true }) config: N_oMagicbox.I_conf;

  // 向子组件提供告之要提供数据的触发
  @T_srv.provide() okMagicBox = this.requestSend;

  // modalID
  @T_srv.prop({ required: true }) id: string;

  private showAnimation = {};

  private boxStyle = {};

  private fullOpenStyle = {};

  private backLeftStyle = {};

  private backTopStyle = {};

  private backRightStyle = {};

  private backBottomStyle = {};

  private backCenterStyle = {};

  // 是否mini窗口
  private isMini: boolean = false;

  // 是否可以下拉
  private isDropdown: boolean = false;

  private dataSource: string = '';

  // 拖拽
  private drag = {
    start: false,
    divX: 0,
    divY: 0,
    mouseX: 0,
    mouseY: 0
  };

  // 数据源和接收方
  private source: any = {};

  // funID
  private receiver: string = '';

  // busID,
  private layoutConfig = {};

  private isFunLayout: boolean = false;

  private customBtns: Array<any> = [];

  private hideAreas: Array<string> = [];

  private headTitle: Array<{
    label: string;
    value: string;
  }> = [];

  // 是否按原功能显示
  private isAutoload: boolean = true;

  private tableConfig = [];

  // private title: string = "选择";
  private title: string = Tsrv.getI18nByPath('others.choose') as string;

  // 在启动配置建立独立与组件事件沟通（功能名，临时定制组件默认事件）
  // 只对baseGrid组件
  private custMagicBoxEventName: Map<string, string> = new Map();

  // QBE
  private QBE: { funName: string; fieldName: string } = {
    funName: '',
    fieldName: ''
  };

  // 编辑状态
  private isEdit: boolean = false;

  beforeDestroy() {
    this.$bus.$off(`magicbox_${this.id}`);
    this.$bus.$off(`magicbox_${this.id}_hide`);
    this.$bus.$off('bus_magicbox_editStatus');

    window.removeEventListener('keydown', this.onKeyDown, true);
  }

  created() {}

  mounted() {
    // 关闭窗口
    this.$bus.$on(`magicbox_${this.id}_hide`, () => {
      this.close();
    });

    this.$bus.$on(`magicbox_${this.id}`, (config: any) => {
      if (config.globalSearch) {
        this.requestSearch(
          {
            globalSearch: config.globalSearch,
            initSearch: null
          },
          'requestSearch'
        );
      }
    });

    // 接受magicbox的编辑状态
    this.$bus.$on('bus_magicbox_editStatus', (isEdit: boolean) => {
      this.isEdit = isEdit;
    });

    this.init(this.config.source, `modal_${this.id}`, this.config.config);

    window.addEventListener('keydown', this.onKeyDown, true);
  }

  /**
   * @Author: ssj
   * @param {KeyboardEvent} ev
   * @description: 监听键盘事件
   */
  private onKeyDown(ev: KeyboardEvent) {
    // 判断是否是mini窗口
    if (this.isMini) {
      if (ev.code === 'Enter') {
        // this.requestSend();
      } else if (ev.code === 'ArrowDown') {
        this.requestChangeRow();
      } else if (ev.code === 'ArrowUp') {
        this.requestChangeRow(false);
      }
    }
  }

  /**
   * @Author: ssj
   * @param {any} source  来源数据
   * @param {string} receiver modal名
   * @param {any} config  配置数据
   * @description: magicbox初始化
   */
  private init(source: any, receiver: string, config: any) {
    // 如果有souce和receiver都不存在，且filter存在，则为过滤
    // const a: bigint = Tsrv.getSnowID();
    if (source && receiver) {
      this.source = source;
      this.receiver = receiver;
      // 初始加载
      this.isAutoload = true;
      // 初始搜索，全局搜索
      let initSearch: string = '';
      let globalSearch: string = '';

      // 有过滤
      if (source.filter) {
        initSearch = source.filter.initSearch || '';
        globalSearch = source.filter.globalSearch || '';

        const isRule: boolean = source.isRule || false;
        // 如果存在初始过滤，则初始加载关闭
        if ((initSearch && initSearch !== '') || isRule) {
          this.isAutoload = false;
        }
      }

      // 如果config存在
      if (config) {
        // 是否以mini模式显示
        this.isMini = config.isMini;
        if (this.isMini) {
          this.setMiniBoxStyle(config);
        }
        this.isDropdown = !!config.isDropdown;
        this.dataSource = config.customSearch;
        // 是否按原功能显示
        this.isFunLayout = config.isFunLayout;
        // 设置自定义按钮
        this.customBtns = Array.isArray(config.customBtns)
          ? config.customBtns
          : [];
        // 设置隐藏区域
        this.hideAreas = Array.isArray(config.hideAreas)
          ? config.hideAreas
          : [];
        // 设置头部展示文本
        this.headTitle = Array.isArray(config.headTitle)
          ? config.headTitle
          : [];
        // 设置table的显示
        this.tableConfig = config.tableConfig ? config.tableConfig : [];
        // QBE
        this.QBE.funName = config.fromFunName || '';
        this.QBE.fieldName = config.fromFieldName || '';
      }

      // 获取功能id和功能名
      let funID = source.funid;
      let funName = source.field; // 功能名
      if (Tsrv.utils.isArray(funID) && Tsrv.utils.isArray(funName)) {
        funID = funID[0];
        funName = funName[0];
      }

      this.title =
        Tsrv.getI18nBySrv(funName) + Tsrv.getI18nByPath('others.inquire');

      // 如果是原功能显示
      if (this.isFunLayout) {
        this.loadLayoutConfig(funID, funName).then(() => {
          setTimeout(() => {
            this.applyTableConfig(this.tableConfig);
            this.requestSearch(
              {
                globalSearch,
                initSearch
              },
              'requestSearch'
            );
          }, 0);
        });
      } else {
        this.isAutoload = false;
        this.loadFunConfig(funName).then(() => {
          // 应用tableconfig
          setTimeout(() => {
            this.applyTableConfig(this.tableConfig);
            this.requestSearch(
              {
                globalSearch,
                initSearch
              },
              'requestSearch'
            );
          }, 0);
        });
      }
      this.show();
    }
  }

  /**
   * @Author: ssj
   * @param {any} config
   * @description: 配置
   */
  private applyTableConfig(config: any) {
    const setTable = (table: any) => {
      if (table.moduleName === 'basegrid') {
        if (this.dataSource) table.setDataSource(this.dataSource);
        config.forEach(el => {
          if (el.isShow === true) {
            // 栏位
            table.setColumnVisible(el.title, true);
          } else if (el.isShow === false) {
            table.setColumnVisible(el.title, false);
          }
          // 过滤
          if (!Tsrv.utils.isEmpty(el.filter)) {
            table.GT_editor.addInitFilter(el.title, el.filter);
            table.setPidSetting(el.title, el.filter);
          }
          // 排序
          if (!Tsrv.utils.isEmpty(el.sort)) {
            table.GT_editor.addSort(el.title, el.sort);
          }
        });

        table.GT_editor.loadTableData();
      } else if (table.moduleName === 'basereport') {
        // 该组件已舍弃
        const cfg = [];
        config.forEach(el => {
          if (el.filter !== '') {
            cfg.push({
              field: el.title,
              value: el.filter
            });
          }
        });
        table.handleRequstFilter(cfg);
      }
    };
    if (this.isFunLayout) {
      const table: any = (this.$refs.fullLayout as Vue).$children[0];
      table && setTable(table);
    } else {
      const table: any = (this.$refs.singleLayout as Vue).$children[0];
      table && setTable(table);
    }
  }

  /**
   * @Author: ssj
   * @description: 打开完整magicbox
   */
  private openFullMagicBox() {
    if (!this.isDropdown) {
      this.isMini = false;
      this.boxStyle = {};
      this.loadLayoutConfig(this.source.funID, this.source.field).then(() => {
        this.isFunLayout = true;
      });
    } else {
      this.close();
    }
  }

  /**
   * @Author: ssj
   * @param {any} config 配置
   * @description: 打开迷你magicbox
   */
  private setMiniBoxStyle(config: any) {
    const boxHeight = 450;
    const boxWidth = 700;
    const screenWidth = document.body.clientWidth;
    const screenHeight = document.body.clientHeight;
    const x = config.miniBound.x - 10;
    const y = config.miniBound.y;
    const width = config.miniBound.width + 20;
    const height = config.miniBound.height;
    const boxLeft =
      x + boxWidth > screenWidth ? Math.max(x + width - boxWidth, 0) : x;
    const boxTop =
      y + height + boxHeight > screenHeight
        ? Math.max(y - boxHeight, 0)
        : y + height;
    this.backLeftStyle = {
      width: `${boxLeft}px`
    };
    this.backRightStyle = {
      width: `${screenWidth - boxLeft - boxWidth}px`
    };
    this.backTopStyle = {
      width: `${boxWidth}px`,
      height: `${y < boxTop ? boxTop - height : boxTop}px`,
      left: `${boxLeft}px`
    };
    this.backBottomStyle = {
      left: `${boxLeft}px`,
      height: `${
        y < boxTop
          ? screenHeight - boxTop - boxHeight
          : screenHeight - y - height
      }px`,
      width: `${boxWidth}px`
    };
    this.backCenterStyle = {
      top: `${y}px`,
      left: `${x + width}px`,
      height: `${height}px`,
      width: `${boxWidth - width}px`
    };
    this.fullOpenStyle = {
      left: `${x + width - 24}px`,
      top: `${y}px`,
      height: `${height}px`,
      width: '24px'
    };
    this.boxStyle = {
      left: `${boxLeft}px`,
      top: `${boxTop}px`,
      width: `${boxWidth}px`,
      height: `${boxHeight}px`
    };
  }

  /**
   * @Author: ssj
   * @param {object} val
   * @param {string} type
   * @description: 请求box里的组件发送数据
   */
  private requestSearch(
    val: { globalSearch: string | null; initSearch: string | null },
    type: string
  ) {
    const msg = {
      type,
      val,
      listenType: 'magicbox'
    };

    this.sendMbusEvent(this.source.field, msg);
  }

  private requestSend() {
    let field = this.source.field;
    let limit = this.source.limit;
    if (!Tsrv.utils.isArray(field)) {
      field = [field];
      limit = [limit];
    }
    for (let i = 0; i < field.length; i++) {
      const msg = {
        type: 'requestSendSelect',
        receiver: this.receiver,
        limit: limit[i],
        listenType: 'magicbox'
      };
      this.sendMbusEvent(field[i], msg);
    }
    this.close(false);
  }

  /**
   * @description: 自定义按钮点击事件
   */
  private custBtnClick(btn: any) {
    let field = this.source.field;
    let limit = this.source.limit;
    if (!Tsrv.utils.isArray(field)) {
      field = [field];
      limit = [limit];
    }
    for (let i = 0; i < field.length; i++) {
      const msg = {
        type: 'custBtnRequestSend',
        receiver: this.receiver,
        limit: limit[i],
        listenType: 'magicbox',
        // 触发按钮
        button: {
          key: btn?.key,
          action: btn?.action
        }
      };
      this.sendMbusEvent(field[i], msg);
    }
    this.close(false);
  }

  /**
   * @Author: ssj
   * @param {boolean} isNext 是否向下
   * @description: 迷你magicbox 行上下移动选择
   */
  // eventName 有些组件会自定义监听而非默认功能名
  private requestChangeRow(isNext: boolean = true) {
    let field = this.source.field;
    let limit = this.source.limit;
    if (!Tsrv.utils.isArray(field)) {
      field = [field];
      limit = [limit];
    }
    for (let i = 0; i < field.length; i++) {
      const msg = {
        type: isNext ? 'requestChangeNextRow' : 'requestChangePrevRow',
        receiver: this.receiver,
        limit: limit[i],
        listenType: 'magicbox'
      };
      this.sendMbusEvent(field[i], msg);
    }
  }

  /**
   * @Author: ssj
   * @param {number} funid 功能名
   * @param {string} field 字段
   * @return {boolean} resolve
   * @description: 加载box里的layout，funid为功能id，field为功能字段名用于监听
   */
  private loadLayoutConfig(funid: number | null | string, field: string) {
    const funID = funid === null ? null : +funid;
    return new Promise(resolve => {
      this.$store
        .dispatch('getLayoutConfigAsync', {
          funid: funID,
          field,
          type: 'layout'
        })
        .then(res => {
          if (res) {
            this.layoutConfig = Tsrv.utils.clone(res.current, true);
            this.custBaseGridDefEventName(this.layoutConfig);
            this.layoutConfig = Tsrv.utils.configRecurseSingle(
              this.layoutConfig,
              this.QBE,
              'QBE'
            );
            this.handleLayoutConfig();

            resolve(true);
          } else {
            resolve(false);
          }
        });
    });
  }

  /**
   * @description: 二次处理layoutConfig
   * 二次处理layoutConfig
   * @returns: void
   */
  private handleLayoutConfig() {
    const layoutConfig = this.layoutConfig;
    // 隐藏区域 通过 cellID
    if (layoutConfig['type'] === 'layout') {
      const config = layoutConfig['config'];
      this.handleConfigByHideAreas(config);
    }
  }

  /**
   * @description:  通过 隐藏区域 hideAreas 通过 cellID 修改 splite的value值
   * @param config
   */
  private handleConfigByHideAreas(config: any) {
    const hideAreas = this.hideAreas;
    const first = config['first'];
    const second = config['second'];
    if (first['type'] === 'comp') {
      hideAreas.includes(first['cellID']) && (config['value'] = '0.01');
    } else if (first['type'] === 'layout') {
      this.handleConfigByHideAreas(first['config']);
    }
    if (second['type'] === 'comp') {
      hideAreas.includes(second['cellID']) && (config['value'] = '0.99');
    } else if (second['type'] === 'layout') {
      this.handleConfigByHideAreas(second['config']);
    }
  }

  /**
   * @Author: ssj
   * @param {string} field
   * @return {boolean} resolve
   * @description: 加载功能配置
   */
  private loadFunConfig(field: string) {
    return new Promise(resolve => {
      this.$store
        .dispatch('getLayoutConfigAsync', {
          funid: null,
          field,
          type: 'component'
        })
        .then(res => {
          if (res) {
            this.layoutConfig = Tsrv.utils.clone(res.current, true);
            this.custBaseGridDefEventName(this.layoutConfig);
            this.custCompConf();
            this.layoutConfig = Tsrv.utils.configRecurseSingle(
              this.layoutConfig,
              this.QBE,
              'QBE'
            );

            resolve(true);
          } else {
            resolve(false);
          }
        });
    });
  }

  private custCompConf() {
    const that = this;
    const compSet = that.config?.config?.compSet;
    if (!Tsrv.utils.noValue(compSet)) {
      compSet.forEach(el => {
        if (that.layoutConfig['name'].toLowerCase() === el.name.toLowerCase()) {
          el.modify.forEach(ele => {
            Tsrv.utils.setObjValByPath(that.layoutConfig, ele.path, ele.value);
          });
          if (!Tsrv.utils.noValue(el?.append)) {
            el.append.forEach(element => {
              this.layoutConfig['config'][element.key] = element.value;
            });
          }
        }
      });
    }
  }

  /**
   * @Author: ssj
   * @param {MouseEvent} e
   * @description: magicbox拖动开始
   */
  private dragStart(e: MouseEvent) {
    if (!this.isMini) {
      const drag = this.drag;
      // 拖拽开始时鼠标的位置
      drag.mouseX = e.pageX;
      drag.mouseY = e.pageY;
      const divRect = (this.$refs.magicBox as Element).getBoundingClientRect();
      // 拖拽开始时box的位置
      drag.divX = divRect.left;
      drag.divY = divRect.top;
      // 开始拖拽
      drag.start = true;
    }
  }

  /**
   * @Author: ssj
   * @description: magicbox拖动结束
   */
  private dragEnd() {
    if (!this.isMini) {
      // 结束拖拽
      this.drag.start = false;
    }
  }

  /**
   * @Author: ssj
   * @param {MouseEvent} e
   * @description: magicbox拖动中
   */
  private dragMove(e: MouseEvent) {
    if (!this.isMini) {
      const drag = this.drag;
      if (drag.start) {
        // 当前鼠标的位置
        const curX = e.pageX;
        const curY = e.pageY;
        // 鼠标的变化
        const disX = curX - drag.mouseX;
        const disY = curY - drag.mouseY;
        // 应改变box的位置
        const styleX = drag.divX + disX;
        const styleY = drag.divY + disY;

        (this.$refs.magicBox as HTMLElement).style.left = `${styleX}px`;
        (this.$refs.magicBox as HTMLElement).style.top = `${styleY}px`;
      }
    }
  }

  /**
   * @Author: ssj
   * @description: 打开magicbox
   */
  private show() {
    this.showAnimation = {
      display: 'block',
      // 'z-index': 102 + this.id
      'z-index': 202 + this.id
    };
  }

  /**
   * @Author: ssj
   * * @param {boolean} isSend 是否发送
   * @description: 关闭magicbox
   */
  private close(isSend: boolean = true) {
    if (this.isEdit) {
      if (isSend) {
        this.$Modal.confirm({
          // title: "关闭",
          // content: "该页签未编辑完成，是否关闭？",
          title: Tsrv.getI18nByPath('others.closed') as string,
          content: Tsrv.getI18nByPath('omagicbox.isclosed') as string,
          onOk: () => {
            this.closeThen();
          },
          onCancel: () => {
            return false;
          }
        });
      }
    } else {
      this.closeThen();
    }
  }

  /**
   * @Author: ssj
   * @description: 关闭后
   */
  private closeThen() {
    this.showAnimation = {
      display: 'none',
      // 'z-index': 102 + this.id
      'z-index': 202 + this.id
    };
    this.isMini = false;
    this.boxStyle = {};
    this.source = '';
    this.receiver = '';
    Tsrv.utils.clear(this.layoutConfig);
    this.$bus.$emit(`modal_${this.id}`, null);
  }

  private sendMbusEvent(funName: string, msg: any) {
    this.$mbus.$emit(this.getEventName(funName), msg);
  }

  private getEventName(funName: string): string {
    if (this.custMagicBoxEventName.has(funName)) {
      return this.custMagicBoxEventName.get(funName);
    }
    return funName;
  }

  // 修改baseGrid配置加入临时监听事件名
  private custBaseGridDefEventName(p: any) {
    if (Tsrv.utils.noValue(p)) {
      return;
    }
    if (p?.type === 'layout') {
      this.custBaseGridDefEventName(p?.config?.first);
      this.custBaseGridDefEventName(p?.config?.second);
    }
    if (p?.config) {
      if (
        p?.type !== 'comp' &&
        p?.name !== 'BaseGrid' &&
        Tsrv.utils.noValue(p?.config?.messageConfig)
      ) {
        return;
      }
      let mc: any;
      if (p?.config?.panels && Array.isArray(p.config.panels)) {
        p.config.panels.forEach(ele => {
          if (!Tsrv.utils.noValue(ele.content.config.messageConfig)) {
            this.baseGridDefEventHandle(ele.content.config.messageConfig, p);
            // 使用多对一全功能打开页签组件，选取描述字段，字段内容未返回
            // console.log('messageConfig', this.custMagicBoxEventName);
          }
        });
      } else {
        this.baseGridDefEventHandle(p.config.messageConfig, p);
      }
    }
  }

  private baseGridDefEventHandle(mc: any, p: any) {
    const cEID = Tsrv.utils.custUUID(8, 16);
    const cEID2 = Tsrv.utils.custUUID(16);

    if (Tsrv.utils.noValue(mc?.custDefListener)) {
      mc['custDefListener'] = {
        search: [cEID],
        coordination: cEID2
      } as N_oSetupPanel.I_custDefListener;
    } else {
      if (mc.custDefListener?.search) {
        mc.custDefListener.search.push(cEID);
      } else {
        mc.custDefListener['search'] = [cEID];
      }
      mc.custDefListener.coordination = cEID2;
    }
    this.custMagicBoxEventName.set(p.config.name, cEID);
  }
}
</script>

<style scoped lang="scss">
.magicbox {
  width: 100%;
  height: 100%;
  z-index: 1001;
  overflow: hidden;
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 0;

  .back {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: auto;
  }
  .mini-back {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    .mini-back-o {
      position: absolute;
      pointer-events: auto;
    }
    .back-left {
      left: 0;
      top: 0;
      height: 100%;
    }
    .back-right {
      right: 0;
      top: 0;
      height: 100%;
    }
    .back-top {
      top: 0;
    }
    .back-bottom {
      bottom: 0;
    }
  }
  .front {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 2;
    .full-open {
      cursor: pointer;
      position: absolute;
      pointer-events: auto;
    }
    .move {
      position: absolute;
      left: 100px;
      top: 50px;
      height: calc(100% - 100px);
      width: calc(100% - 200px);
      pointer-events: auto;
      border: 1px solid #000;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), inset 0 0 5px rgba(0, 0, 0, 0.5);
      .cover {
        width: 100%;
        height: 100%;
        background-color: #ddd;
        box-shadow: var(--default-box-shadow-down);
        .header {
          width: 100%;
          height: 40px;
          background-color: #eee;
          cursor: all-scroll;
          .title {
            font-size: 14px;
            font-weight: bold;
            padding: 9px 10px;
            color: #666;
          }
          .ivu-icon {
            position: absolute;
            right: 0;
            top: 0;
            font-size: 20px;
            top: 10px;
            right: 10px;
            color: #666;
            cursor: pointer;
          }
        }
        .main {
          width: 100%;
          // background-color: #fff;
          background-color: var(--model-bg-color);
          height: calc(100% - 80px);
          .full {
            width: 100%;
            height: 100%;
          }
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .headTitle {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: start;
            align-items: center;
            flex-wrap: wrap;
            padding: 10px;
            background-color: #f6fffe;
            .title-item {
              display: flex;
              flex-direction: row;
              justify-content: space-around;
              align-items: center;
              flex-wrap: nowrap;
              margin-left: 10px;
              .label {
                font-weight: 600;
                padding: 3px;
              }
              .value {
                padding: 3px;
                border-bottom: 1px solid #a19d9d;
              }
            }
          }
        }
        .footer {
          width: 100%;
          height: 40px;
          background-color: rgba(244, 244, 244, 1);
          button {
            float: right;
            margin: 8px 10px;
          }
        }
      }
    }
  }
}
</style>
